<template>
  <view>
    <view
      class="card-view top-card"
      v-for="(item, index) in orderMaterialInfoList">
      <view class="info-row">
        <view class="name">耗材名称</view>
        <view class="value">{{ item.materialName }}</view>
      </view>
      <view class="info-row">
        <view class="name">消耗数量</view>
        <view class="value">{{ item.materialNum }}</view>
      </view>
      <view class="info-row">
        <view class="name">金额</view>
        <view class="value">{{ item.inputPrice * item.materialNum }}元</view>
      </view>
    </view>

    <view class="card-view last-card">
      <template>
        <view class="evaluate-row">
          <view class="name">耗材名称</view>
          <view v-if="!form.materialName" @click="openSelect">请选择</view>
          <view v-else @click="openSelect" style="color: #232323">
            {{ form.materialName }}
          </view>
          <uni-icons type="right"></uni-icons>
          <!-- <view class="value">
            <picker range-key="materialName" :range="materialInfoUseList" @change="onPickerChange">
              <view class="picker-item">
                <view v-if="!form.materialName">请选择</view>
                <view v-else style="color: #232323">{{
                  form.materialName
                }}</view>
                <uni-icons type="right"></uni-icons>
              </view>
            </picker>
          </view> -->
        </view>
        <view class="evaluate-row">
          <view class="name">消耗数量</view>
          <view class="value">
            <input
              v-model="form.materialNum"
              placeholder="请填写数量"
              type="number"
              placeholder-class="placeholder-class" />
          </view>
        </view>
      </template>
    </view>
    <view class="add-del-view">
      <view class="del-btn" @click="delOne">删除</view>
      <view class="gap"></view>
      <view class="add-btn" @click="addOne">添加</view>
    </view>
    <view style="height: 1rpx"></view>

    <view class="bottom-view">
      <view class="money">金额：{{ totalMoney }}元 ({{ payStatus }})</view>
      <view class="submit-btn" @click="submit">返回</view>
    </view>
    <view class="date-background" v-show="visible">
      <view class="date-gray-background" @click="hiddeDatePicker"></view>
      <view class="date-container">
        <view class="transparent">
          <view class="date-confirm">
            <view @click="hiddeDatePicker" class="pickerCancel">取消</view>
            <input
              class="search-input"
              v-model="searchValue"
              placeholder="请输入关键字" />

            <view @click="confirmHandle" class="pickerConfirm">确定</view>
          </view>
          <picker-view
            indicator-class="indicator"
            :value="setValues"
            @change="bindChange"
            indicator-style="height: 100rpx;"
            mask-style="height:500rpx;"
            class="pick-view-style">
            <picker-view-column class="pickViewColumn">
              <view
                v-for="item in materialInfoUseList"
                :key="item.id"
                style="line-height: 50rpx">
                {{ item.materialName }}
              </view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as orderInfo from "../../common/api/orderInfo.js";
import * as materialInfoUse from "../../common/api/materialInfoUse.js";
import * as orderMaterialInfo from "../../common/api/orderMaterialInfo.js";
export default {
  data() {
    return {
      uid: "",
      detailData: {},
      serviceItem: "",
      materialInfoUseList: [],
      orderMaterialInfoList: [],
      payStatus: "",
      visible: false,
      searchValue: "",
      form: {
        uid: "",
        orderUid: "",
        orderNum: "",
        materialUid: "",
        materialName: "",
        materialPic: "",
        inputPrice: "",
        materialNum: "",
        unitName: "",
        specs: "",
        paymentStatus: "",
      },
      setValues: [], // picker 选择值
      materialInfoUseListAll: [],
      currentMaterial: {},
      currentIndex: 0,
    };
  },
  computed: {
    totalMoney() {
      let sum = 0;
      const list = this.orderMaterialInfoList || [];
      list.forEach((e) => {
        sum += e.inputPrice * e.materialNum;
      });
      return sum;
    },
  },
  watch: {
    searchValue(newVal, oldVal) {
      this.searchHandle();
    },
  },
  onLoad(opt) {
    if (opt.uid) {
      this.uid = opt.uid;
    }
  },
  onShow() {
    this.getData();
    this.getOrderMaterialInfoList();
    // this.getMaterialInfoUseList()
  },
  methods: {
    // 下拉搜索start
    confirmHandle() {
      this.visible = !this.visible;
      let item = this.currentMaterial;
      this.$set(this.form, "materialUid", item.uid);
      this.$set(this.form, "materialName", item.materialName);
      this.$set(this.form, "materialPic", item.materialPic);
      this.$set(this.form, "inputPrice", item.inputPrice);
      this.$set(this.form, "unitName", item.unitName);
      this.$set(this.form, "specs", item.specs);
    },
    openSelect() {
      this.searchValue = "";
      if (this.currentIndex) {
        this.setValues = [this.currentIndex];
        this.currentMaterial = this.materialInfoUseList[this.currentIndex];
      } else {
        this.setValues = [0];
        this.currentMaterial = this.materialInfoUseList[0];
      }

      this.visible = true;
    },
    hiddeDatePicker() {
      this.visible = !this.visible;
    },
    searchHandle() {
      if (!this.searchValue) {
        this.materialInfoUseList = this.materialInfoUseListAll;
        return;
      }
      this.materialInfoUseList = this.materialInfoUseListAll.filter(
        (item) => item.materialName.indexOf(this.searchValue) > -1
      );
      this.setValues = [0];
      this.currentIndex = 0;
      this.currentMaterial = this.materialInfoUseList[0];
    },
    bindChange(e) {
      this.setValues = e.detail.value;
      const index = e.detail.value || 0;
      this.currentMaterial = this.materialInfoUseList[index];
      this.currentIndex = index;
    },
    //下拉搜索end

    resetForm() {
      Object.keys(this.form).forEach((k) => {
        this.form[k] = "";
      });
    },
    getData() {
      const param = {
        uid: this.uid,
      };
      orderInfo
        .queryById(param)
        .then((result) => {
          this.detailData = result.data.data;
          this.getMaterialInfoUseList();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getMaterialInfoUseList() {
      const param = {
        hospitalUid: this.detailData.hospitalUid,
      };
      materialInfoUse
        .queryByPage(param)
        .then((result) => {
          this.materialInfoUseList = result.data.data.rows || [];
          this.materialInfoUseListAll = this.materialInfoUseList;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    onPickerChange(e) {
      const index = e.detail.value || 0;
      const item = this.materialInfoUseList[index];
      this.$set(this.form, "materialUid", item.uid);
      this.$set(this.form, "materialName", item.materialName);
      this.$set(this.form, "materialPic", item.materialPic);
      this.$set(this.form, "inputPrice", item.inputPrice);
      this.$set(this.form, "unitName", item.unitName);
      this.$set(this.form, "specs", item.specs);
    },
    getOrderMaterialInfoList() {
      const param = {
        orderUid: this.uid,
      };
      orderMaterialInfo
        .queryByPage(param)
        .then((result) => {
          this.orderMaterialInfoList = result.data.data.rows || [];
          this.payStatus = result.data.data.rows[0].paymentStatus;
          this.goodsNames = this.orderMaterialInfoList
            .map((item) => item.materialName)
            .join(",");
        })
        .catch((error) => {
          console.log(error);
        });
    },
    checkForm() {
      const showMsg = (msg) => {
        uni.showToast({
          title: msg,
          icon: "none",
        });
      };
      if (!this.form.materialName) {
        showMsg("请选择耗材");
        return false;
      }
      if (!this.form.materialNum) {
        showMsg("请填写数量");
        return false;
      }
      return true;
    },
    addOne() {
      this.form.orderUid = this.detailData.uid;
      this.form.orderNum = this.detailData.orderNum;
      console.log(JSON.stringify(this.form));
      if (!this.checkForm()) {
        return;
      }
      uni.showModal({
        title: "提示",
        content: "确认添加？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = Object.assign({}, this.form);
            orderMaterialInfo
              .insert(param)
              .then((result) => {
                uni.showToast({
                  title: result.data.msg,
                  icon: "none",
                });
                this.getOrderMaterialInfoList();
                this.resetForm();
                this.currentMaterial = {};
                this.currentIndex = 0;
                this.setValues = [0];
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    delOne() {
      const list = this.orderMaterialInfoList || [];
      if (list.length <= 0) {
        uni.showToast({
          title: "没有可删除的数据",
          icon: "none",
        });
        return;
      }
      uni.showModal({
        title: "提示",
        content: "确认删除？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const item = list[list.length - 1];
            const param = {
              uid: item.uid,
            };
            orderMaterialInfo
              .deleteById(param)
              .then((result) => {
                uni.showToast({
                  title: result.data.msg,
                  icon: "none",
                });
                this.getOrderMaterialInfoList();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    submit() {
      // uni.navigateTo({
      // 	url:'/pages/serviceSummary/serviceSummary?uid='+this.uid
      // })
      // this.endService()
      uni.navigateBack();
      // this.payHandle()
    },

    // 预支付
    payHandle() {
      orderInfo
        .createOrder({
          openId: this.detailData.wxOpenid,
          totalPrice: this.totalMoney,
          orderType: "耗材上门",
          goodsName: this.goodsNames,
          orderNum: this.detailData.orderNum,
        })
        .then((result) => {
          console.log("result", result);
          let orderInfo = {
            ...result.data.data,
            signType: "HMAC-SHA256",
            appid: "wx6abe127f5b5330b0",
            package: result.data.data.prepayId,
            timeStamp: result.data.data.timeStamp + "",
          };
          uni.requestPayment({
            provider: "wxpay",
            ...orderInfo,
            success(res) {
              console.log("支付成功", res);
              uni.showToast({
                icon: "success",
                title: "支付成功",
                complete() {
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 2000);
                },
              });
            },
            fail(err) {
              console.log("支付失败", err);
              uni.showToast({
                icon: "none",
                title: "支付失败",
                complete() {},
              });
            },
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    endService() {
      uni.showModal({
        title: "提示",
        content: "结束服务？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = {
              uid: this.uid,
              status: "已完成",
            };
            orderInfo
              .update(param)
              .then((result) => {
                uni.navigateBack();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card-view {
  background: white;
  padding: 0rpx 30rpx;
  box-sizing: border-box;
}

.top-card {
  margin-bottom: 10rpx;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .name {
    width: 150rpx;
    font-size: #232323;
    font-weight: 28rpx;
    font-weight: bold;
  }

  .value {
    color: rgba(35, 35, 35, 0.8);
    font-size: 28rpx;
  }
}

.more-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80rpx;
  color: rgba(35, 35, 35, 0.4);
  font-size: 26rpx;
}

.last-card {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.evaluate-row {
  display: flex;
  align-items: center;
  min-height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .name {
    width: 150rpx;
    font-size: #232323;
    font-weight: 28rpx;
    font-weight: bold;
  }

  .value {
    color: rgba(35, 35, 35, 0.8);
    font-size: 28rpx;
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
  }

  .picker-item {
    color: rgba(136, 136, 136, 0.8);
    font-size: 28rpx;
    display: flex;
    align-items: center;
  }

  input {
    text-align: right;
  }
}

.placeholder-class {
  color: rgba(136, 136, 136, 0.8);
  font-size: 28rpx;
}

.bottom-view {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  display: flex;
  padding: 14rpx 30rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .money {
    margin-bottom: 20rpx;
    font-size: 26rpx;
    font-weight: bold;
  }

  .line-btn {
    width: 250rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2rpx #2eb0d9;
    color: #2eb0d9;
    border-radius: 40rpx;
  }

  .submit-btn {
    background: #2eb0d9;
    color: white;
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40rpx;
  }
}

.checkbox-view {
  display: flex;
  flex-direction: column;
  min-height: 100rpx;
  border-bottom: solid 2rpx #f8f8f8;

  .top {
    display: flex;
    align-items: center;

    .name {
      width: 150rpx;
      font-size: #232323;
      font-weight: 28rpx;
      font-weight: bold;
    }

    .value {
      color: rgba(35, 35, 35, 0.8);
      font-size: 28rpx;
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: flex-end;
    }
  }

  .checkbox-group-view {
    margin-top: 20rpx;
  }
}

.add-del-view {
  display: flex;
  align-items: center;
  padding: 30rpx;
  box-sizing: border-box;
  margin-bottom: 180rpx;

  .del-btn {
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d9001b;
    color: white;
    border-radius: 20rpx;
  }

  .gap {
    width: 30rpx;
  }

  .add-btn {
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #169bd5;
    color: white;
    border-radius: 20rpx;
  }
}

.date-background {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.date-gray-background {
  position: absolute;
  width: 100%;
  top: 0rpx;
  background: rgba(0, 0, 0, 0.5);
  height: calc(100% - 500rpx);
}

.chaxunjieguo {
  width: 100%;
  height: 500rpx;
  overflow: scroll;
  color: black;
}

.chaxunjieguo text {
  display: block;
  text-align: center;
  padding-bottom: 10rpx;
}

.date-container {
  position: absolute;
  width: 100%;
  height: 600rpx;
  overflow: hidden;
  background: #fff;
  bottom: 0;
  z-index: 1000;
}

.date-confirm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  font-size: 34rpx;
  line-height: 100rpx;
  z-index: 2;
  // line-height: 70rpx;
  // color: var(--ThemeColor)
}

.pickViewColumn {
  height: 600rpx;
  /* margin-top: -300rpx; */
}

.indicator {
  height: 80rpx;
  /* border: 1rpx solid #E5E8E8; */
}

.pickerCancel {
  font-size: 30rpx;
  color: #777;
  margin-right: 30rpx;
}

.pickerConfirm {
  font-size: 30rpx;
  color: #4c83d6;
  margin-left: 30rpx;
}

.search-input {
  width: 70%;
  height: 70rpx;
  border-radius: 40rpx;
  border: 2rpx solid #e5e8e8;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
  background: #f8f8f8;
  font-size: 25rpx;
}

.pick-view-style {
  width: 100%;
  height: 300rpx;
  text-align: center;
  background: white;
}
</style>
